<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./libs/vue2.js"></script>
    <style>
        .home{
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 调用全局组件home -->
        <!-- native: vue2中提供的一个事件修饰符, 告诉vue这是一个原生事件, 并且让vue将该事件自动注册给组件视图的根元素 -->
        <!-- vue2中, 在组件的调用标签上注册的事件, 默认是自定义事件(即使事件名称和原生事件名称相同), 自定义事件只能在组件内部通过this.$emit()方法来触发, 如果我们希望将其作为原生事件来触发, 就可以使用native事件修饰符 -->
        <home @click.native="handler"/>
    </div>
</body>
<script>
    // 注册全局组件home
    Vue.component('home', {
        template: `
            <div class="home">
                <h1>{{title}}</h1>    
            </div>
        `,
        data() {
            return {
                title: 'home组件'
            }
        }
    });
    new Vue({
        el: '#app',
        methods:{
            handler(){
                console.log('home组件被点击了');
            }
        }
    });
</script>

</html>